<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>flex垂直对齐</title>
    <style>
        /*
        内容垂直对齐
        语法:align-items: flex-start | flex-end | center | baseline | stretch
        align-items:flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
                    flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
                    center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
                    baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与flex-start等效。其它情况下，该值将参与基线对齐。
                    stretch：如果指定侧轴大小的属性值为auto，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照min/max-width/height属性的限制。
         */
        .container {
            width: 400px;
            height: 600px;
            background-color: #e1e1e1;
            display: flex;
            align-items: baseline;
        }
        .container div {
            background-color: #ffb84d;
            border: 2px solid #666;
        }
        .item1{
            width: 100px;
            height: 100px;
        }
        .item2{
            width: 100px;
            height: 100px;
        }
        .item3{
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item1">one</div>
        <div class="item2">two</div>
        <div class="item3">three</div>
    </div>
</body>
</html>